{% extends "administrative/base.html" %}

{% block page_link %}
    <script src="../../static/administrative/js/meeting_process.js"></script>
    <link rel="stylesheet" href="../../static/technological/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .basic-tabs{
            box-shadow: 0 1.5px 0 0 #1E90FF;
            color: #1E90FF;
        }
        .basic{
            width: 8%;height: 40px;line-height: 40px;text-align: center;display: inline-block;vertical-align: top;cursor: pointer;
        }
        .input-style{
            display: inline-block;
            width: 73%;
            height: 35px;
            border-radius: 7px;
            font-size: 14px;
            padding-left: 1%;
            border: #cfcfcf solid 1px;
            margin-left: 1%;
        }

        .textarea-style{
            display: inline-block;
            width: 73%;
            border-radius: 7px;
            font-size: 14px;
            padding-left: 1%;
            border: #cfcfcf solid 1px;
            margin-left: 1%;
        }
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .halving_line{
            width: 80%;
            border: #cfcfcf solid 0.5px;
            margin-left: 2%;
        }
        .label_tag{
            width: 100px;
            text-align: right;
            vertical-align: top;
            font-size: 14px;
            line-height: 35px;
        }
        .add-station{
            width: 60%;height: 35px;background: #0070c1;border-color: #c5dbec;color: #ffffff;
        }
        tr{
            height: 35px;
        }
        th{
            text-align: center;
        }
        table {
            table-layout: fixed;
        }
        td:first-child, th:first-child {
            position:sticky;
            left:0; /* 首行永远固定在左侧 */
            z-index:1;
        }
        thead tr th {
            position:sticky;
            top:0; /* 列首永远固定在头部  */
            background-color: #78C3F3;
            color: #00688B;
        }
        th:first-child{
            z-index:2;
        }
        .model_li{
            color: #3f414d;
            width: 25%;
            cursor: pointer;
            display: none;
        }
    </style>
{% endblock %}



{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="meeting_process.html" style="color: #0b0b0b;">
                <i class="iconfont icon-faqi"></i>
                <span> 会议管理</span><span> > </span><span> 流程管理</span>
            </a>
        </div>

        <div style="width: 7%;text-align: center;height: 100%;line-height: 40px;float: right;">
            <button id="add_station" type="button" class="btn btn-default add-station preserve" onclick="Export()">提交</button>
        </div>
    </div>


    <div style="width: 100%;height: 40px;padding-left: 3%;box-shadow: 0 1px 0 0 #CFCFCF;">

        <div id="create-flow" class="basic basic-tabs">
            流程图
        </div>
    </div>


    <!-- 流程图 -->
    <div id="flow" class="flow_chart" style="width: 100%;height: 88%;margin-top: 0.2%;">
        <div id="flow_chart"></div>
        <textarea name="" id="result" cols="30" style="display: none;"></textarea>
    </div>


{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/public_file/other/jquery.js"></script>
    <script type="text/javascript" src="../../static/public_file/js/GooFunc.js"></script>
    <script type="text/javascript" src="../../static/public_file/js/json2.js"></script>
    <script type="text/javascript" src="../../static/public_file/GooFlow/codebase/GooFlow.js"></script>
    <script type="text/javascript">
        var hint_type = "{{ hint_type | safe }}";
        if (hint_type){
            alert(hint_type);
        }

        var property = {
            toolBtns: ["join", "fork"],
            haveHead: false,
            headBtns: [], //如果haveHead=true，则定义HEAD区的按钮
            haveTool: true,
            haveGroup: true,
            useOperStack: true};
        var demo;
        var jsondata = {{ jsondata | safe }}
        function Export() {
            var flowStr = JSON.stringify(demo.exportData());
            var meeting_room = document.getElementById('meeting_room').value
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/administrative/meeting_process.html", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("flowStr="+String(flowStr)+"&regimentation=会议管理"+"&table_name=会议申请"+"&meeting_room="+String(meeting_room));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200){
                            alert("保存成功");
                            window.location = "/administrative/my_meeting.html";
                        }
                    }
                }
            };
        }
        $(document).ready(function() {
            demo = $.createGooFlow($("#flow_chart"), property);
            demo.loadData(jsondata);
        });
        function click_ul_9() {
            if (document.getElementById("jiantou5").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator-1").style.display = "inline-block";
            }else {
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator-1").style.display = "none";
            }
        }

        function click_ul_10() {
            if (document.getElementById("jiantou4").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator").style.display = "inline-block";
            }else {
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator").style.display = "none";
            }
        }
    </script>
{% endblock %}



